<template>
  <div class="home" style="background-color: #f3f3f3;">

    <!-- 头部区域 -->
    <el-row class="bg-lightgreen shadow" type="flex" align="middle">
      <el-col :span="2" :offset="2">
        <img style="cursor: pointer;" src="../assets/imgs/home/hubu_logo.png" alt="" @click="backToHome()">
      </el-col>
    </el-row>
    <!-- 面包屑 -->
    <div class="bg-breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>更多教师</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <!-- 内容主体部分 -->
    <div id="main">
      <!-- Main content -->
      <div class="document shadow">
          <!-- <div class="search_div">
            <el-row class="search_row">
                <div class="union-input">
                    <input placeholder="输入课程名称" type="text" class="input" v-model="searchValue" clearable>
                    <div class="button" @click="searchCourse()">
                        <i slot="suffix" class="el-icon-search el-input__icon"></i>
                        搜索
                    </div>
                </div>
            </el-row>
          </div> -->
          <div class="courselist_div">
            <el-row :gutter="20" class="course-content">
                <el-col :span="6" v-for="item in teacherlist" :key="item.id">
                  <el-card shadow="hover" class="course-click">
                    <img :src="item.avatar_url" class="course-img" @click="teacherclick(item.value)">
                    <div class="course-desc" @click="teacherclick(item.value)">
                      <div class="course-name">{{item.name}}</div>
                      <div class="course-detail">{{item.summary}}</div>
                    </div>
                  </el-card>
                </el-col>
            </el-row>
            <!-- 分页导航 -->
            <div class="page_div">
              <!-- 分页导航 -->
              <el-pagination
                background
                @current-change="handleCurrentChange"
                :page-size="12"
                layout="total, prev, pager, next"
                :total="total">
              </el-pagination>
                <!-- <el-pagination
                background
                :page-size="10"
                layout="prev, pager, next"
                :total="100">
                </el-pagination> -->
            </div>
          </div>
      </div>
    </div>

    <footer id="footer">
      <div class="foot-motto">
        <el-row :gutter="10" class="foot-icons">
          <el-col :span="3" :offset="0" class="icon">
            <a href="http://news.hubu.edu.cn/">
              <img src="../assets/imgs/home/home-link01.png">
              湖大新闻
            </a>
          </el-col>
          <el-col :span="3" :offset="0" class="icon">
            <a href="http://media.hubu.edu.cn/index/hddst.htm">
              <img src="../assets/imgs/home/home-link02.png">
              广播电视
            </a>
          </el-col>
          <el-col :span="3" :offset="0" class="icon">
            <a href="http://hubu.ihwrm.com/index/article/oldrelease.html">
              <img src="../assets/imgs/home/home-link03.png">
              电子校报
            </a>
          </el-col>
          <el-col :span="3" :offset="0" class="icon">
            <a href="http://mailbox.hubu.edu.cn/">
              <img src="../assets/imgs/home/home-link04.png">
              校务信箱
            </a>
          </el-col>
          <el-col :span="3" :offset="0">
          </el-col>
          <el-col :span="3" :offset="0" class="icon">
            <el-popover
              placement="top"
              width="150"
              trigger="hover">
              <img src="../assets/imgs/home/QR-site.png" style="transform: translate(20px, 0);">
              <a href="#" slot="reference">
                <img src="../assets/imgs/home/home-link05.png">
                湖大官网
              </a>
            </el-popover>
          </el-col>
          <el-col :span="3" :offset="0" class="icon">
            <el-popover
              placement="top"
              width="150"
              trigger="hover">
              <img src="../assets/imgs/home/QR-wx.png" style="transform: translate(20px, 0);">
              <a href="#" slot="reference">
                <img src="../assets/imgs/home/home-link06.png">
                湖大微信
              </a>
            </el-popover>
          </el-col>
          <el-col :span="3" :offset="0" class="icon">
            <el-popover
              placement="top"
              width="150"
              trigger="hover">
              <img src="../assets/imgs/home/QR-wb.png" style="transform: translate(20px, 0);">
              <a href="#" slot="reference">
                <img src="../assets/imgs/home/home-link07.png">
                湖大微博
              </a>
            </el-popover>
          </el-col>
        </el-row>
      </div>
    </footer>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',
  data () {
    return {
      searchValue: '',
      searchMethod: '1',
      total: 0,
      teacherlist: [
        // {
        //     value: '1',
        //     course_src: require('../assets/imgs/home/course01.png'),
        //     course_name: '数据结构',
        //     course_detail: '还就哪个疯狂学习数据结构'
        // },
        // {
        //     value: '2',
        //     course_src: require('../assets/imgs/home/course01.png'),
        //     course_name: '数据结构',
        //     course_detail: '还就哪个疯狂学习数据结构'
        // },
        // {
        //     value: '3',
        //     course_src: require('../assets/imgs/home/course01.png'),
        //     course_name: '数据结构',
        //     course_detail: '还就哪个疯狂学习数据结构'
        // },
        // {
        //     value: '4',
        //     course_src: require('../assets/imgs/home/course01.png'),
        //     course_name: '数据结构',
        //     course_detail: '还就哪个疯狂学习数据结构'
        // },
        // {
        //     value: '5',
        //     course_src: require('../assets/imgs/home/course01.png'),
        //     course_name: '数据结构',
        //     course_detail: '还就哪个疯狂学习数据结构'
        // }
      ],
      currentPage: 1
    }
  },
  // 执行方法
  created () {
    this.GetTeacherList()
  },
  methods: {
    backToHome () {
      this.$router.push('home')
    },
    teacherclick (id) {
      window.sessionStorage.setItem('chosenTeacher', id)
      this.$router.push({ path: '/teacherdetail' })
    },
    async GetTeacherList () {
      const { data: res } = await this.$http.post(`board/all/getGoodTeacherOrStudentList?identity=3&page=${this.currentPage - 1}&rows=10`)
      if (res.state != true) return
      console.log(res)
      var item = res.detail
      this.total = item.total
      res.detail.list.forEach(item => {
        var obj = {
          value: 0,
          name: '',
          summary: '',
          detail: '',
          avatar_url: ''
        }
        obj.value = item.id
        obj.name = item.name
        obj.summary = item.summary
        obj.detail = item.detail
        obj.avatar_url = item.avatar_url
        this.teacherlist.push(obj)
      })
    },
    // 分页
    async handleCurrentChange (val) {
      this.currentPage = val;
      // this.GetTeacherList();
    },
    // 搜索所有匹配到的课程
    async searchCourse () {
      if (this.searchMethod == 1) {
        const { data: res } = await this.$http.post(`course/all/getCourseList?page=${this.currentPage - 1}&rows=10&courseName=` + this.searchValue)
        console.log(res)
        if (!res.state) return
        this.courselist = []
        res.detail.list.forEach(item => {
          var obj = {
            value: 0,
            course_name: '',
            course_detail: '',
            avatar_url: ''
          }
          obj.value = item.id
          obj.course_name = item.course_name
          obj.course_detail = item.course_detail
          obj.avatar_url = item.avatar_url
          this.courselist.push(obj)
        })
      }
      if (this.searchMethod == 2) {
        const { data: res } = await this.$http.post('course/all/getCourseList?page=0&rows=10&schoolName=' + this.searchValue)
        console.log(res)
        if (!res.state) return
        this.courselist = []
        res.detail.list.forEach(item => {
          var obj = {
            value: 0,
            course_name: '',
            course_detail: '',
            avatar_url: ''
          }
          obj.value = item.id
          obj.course_name = item.course_name
          obj.course_detail = item.course_detail
          obj.avatar_url = item.avatar_url
          this.courselist.push(obj)
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.bg-lightgreen {
  background-color: #1e6f46;
  // background-image: linear-gradient(to bottom, #638b6e, #87ac92);
  height: 100px;
  border-radius: 2px;
  border-bottom: 2px solid #799982;
}

.bg-breadcrumb {
  background-color: #FFFFFF;
  height: 35px;
  line-height: 35px;
  width: 100%;

  .el-breadcrumb {
    height: 35px;
    line-height: 35px;
    margin-left: 6%;
  }
}

// 主体内容部分
#main {
  padding: 0 6%;    // 可以通过这里的padding来更改两边的留白
  margin-bottom: 10px;
  background: url('../assets/imgs/home/sy-bg.jpeg') no-repeat bottom;

  .carousel {
    width: 100%;
    height: 400px;
    margin-top: 5px;

    .carousel-img {
      width: 100%;
      height: 100%;
    }
  }

  //主体内容部分
  .document {
    padding: 0 40px;
    background-color: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
    .search_row {
        top: 25px;
    }
    .union-input {
        position: relative;
        left: 33%;
        top: -1px;
        width: 492px;
        height: 40px;
        border-radius: 1000px 1000px 1000px 1000px;
        text-align: left;
        border: 1px solid rgba(187, 187, 187, 100);
    }
    .input {
        margin-left: 40px;
        height: 100%;
        font-size: 14px;
        background: transparent;
        border: none;
        outline: none;
    }
    .button {
        position: absolute;
        top: -1px;
        right: -1px;
        width: 132px;
        height: 40px;
        line-height: 20px;
        border-radius: 0px 9999px 9999px 0px;
        background-color: #007750;
        color: rgba(255, 255, 255, 100);
        font-size: 14px;
        text-align: center;
        border: 1px solid rgba(75, 175, 80, 100);
        cursor: pointer;
    }
    .button:hover{
      background-color: rgba(75, 175, 80, 100);
    }
    .courselist_div {
        margin-top: 10px;

        .course-click {
            cursor: pointer;
            width: 250px;
            margin-top: 20px;
        }

        .course-desc {
          padding: 10px;

          .course-name {
            margin-bottom: 5px;
            text-align: center;
          }
          .course-detail {
            color: #8F8E94;
            font-size: 13px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            text-align: center;
          }
        }
    }
    .course {
      height: 300px;
      width: 100%;
      // margin: 10px 0;

      .course-bar {
        height: 45px;
        border-bottom: 1px solid #e8e7e4;
        position: relative;

        .title-main {
          margin: 0;
          display: inline-block;
          font-size: 18px;
          font-weight: normal;
          line-height: 38px;
          border-bottom: 3px solid #007750;
        }
        .title-sub {
          font-family: "Courier New", Courier, monospace;
          color: #1a6c46;
          font-size: 14px;
        }

        .more {
          display: block;
          float: right;
          font-size: 14px;
          line-height: 44px;
          color: black;
        }
        .icon-more {
          display: block;
          float: right;
          color: #1a6c46;
          font-size: 14px;
          line-height: 44px;
        }
      }

      .course-content {
        margin-top: 10px;
      }
    }
    .course-img {
      width: 100%;
      height: 150px;
      border-radius: 5px;
    }

    .page_div {
        padding: 20px;
        text-align: right;
    }
  }
}

#footer {
  height: 110px;
  box-sizing: border-box;
  padding: 0 170px;
  border-radius: 2px;
  background: url('../assets/imgs/home/foot-bg.jpeg') no-repeat;

  .foot-motto {
    width: 650px;
    height: 100%;
    margin: 0 auto;
    padding-left: 450px;
    background: url('../assets/imgs/home/motto.png') no-repeat left top;

    .foot-icons {
      transform: translate(0, 30%);
      // background-color: #fff;
      height: 65%;
      display: flex;

      .icon {
        height: 100%;

        a {
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 14px;
          color: #bed2c6;
          line-height: 32px;
        }
      }
    }
  }
}

</style>
